From e2876ea3b4180798fdce142e9a7077d5856e6076 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Wed, 14 Jul 2021 11:35:22 +0200
Subject: collapse chapters

---
 pages/post/[id].tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'pages/post/[id].tsx')

diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
index 70347c8..35a41e6 100644
--- a/pages/post/[id].tsx
+++ b/pages/post/[id].tsx
@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import { readdirSync, readFileSync } from 'fs';
 import { join } from 'path';
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import rehypeRaw from 'rehype-raw';
@@ -76,6 +76,12 @@ export function RenderedArticle(props: { content: string; }) {
 	/>;
 }
 
+var collapsed = false;
+function toggle() {
+	collapsed = !collapsed;
+	document.documentElement.style.setProperty('--collapse-horizontal-gap', Number(collapsed).toString());
+}
+
 export default function Post(props: {
 	content: string;
 	meta: ArticleMeta;
@@ -89,7 +95,7 @@ export default function Post(props: {
 		</Head>
 		<div className='centeredPage'>
 			<div className='titleWrapper'>
-				<h1>{props.meta.title}</h1>
+				<h1 onClick={toggle}>{props.meta.title}</h1>
 				<p className='subtile'>{props.meta.subtitle}</p>
 				{props.meta.tags && <Tags tags={props.meta.tags} />}
 			</div>
-- 
cgit v1.2.3